<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>猎舞网</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
		<link rel="stylesheet" href="__PUBLIC__static/lib/weui.min.css">
		<link rel="stylesheet" href="__PUBLIC__static/css/jquery-weui.css">
		<link rel="stylesheet" href="__PUBLIC__static/css/style.css">
		<style type="text/css">
			/*点击添加图片按钮div包裹*/
			.addbtn_wrap{
				position: relative;
			}

			/*添加图片按钮*/
			.addbtn{
				position: absolute;
			}
			input[type=file]{
				width: 100px;
				position: absolute;
				top: 5px;
				opacity: 0;
			}

			/*文本输入框*/
			input[type=text]{
				margin-top: 20px;
			}

			/*提交按钮*/
			input[type=submit]{
				position: absolute;
				top: 500px;
				z-index: 999;
			}

			/*所有图片div包裹*/
			.img_wrap,second{
				width:600px;
				margin-top: 40px;
				float: left;
				margin-bottom: 20px;
			}

			.pic_wrap{
				width: 50px;
				height: 60px;
				float: left;
				position: relative;
				margin: 4px;
			}
            .pic_wrap1{
				width: 50px;
				height: 60px;
				float: left;
				position: relative;
				margin: 4px;
			}
			.img{
				width: 50px;
				height: 60px;
				float: left;
			}

			.delete{
				width: 50px;
				height: 40px;
				position: absolute;
				display: none;
				border-radius: 6px;
			}

			.delete img{
				float: right;
			}

			.wy-header-title {
				position: relative;
				width: 100%;
				height: 56px;
				background-color: black;
				margin-left: -2px;
			}
			
			.backw {
				position: absolute;
				width: 30px;
				top: 25%;
				left: 9px;
			}
			
			.wy-header-title span {
				font-family: FZLTZHK;
				font-size: 22px;
				color: #FFFFFF;
				line-height: 56px;
			}
			
			.inputbox {
				position: relative;
				width: 95%;
				height: 40px;
				border-bottom: 1px solid #CCCCCC;
				margin-left: 5%;
				margin-top: 10%;
				font-size: 16px;
			}
			.inputbox img {
				width: 24px;
				margin-right: 10px;
			}		
	        .box,.jigou,.zizhi {
				position: relative;
				width: 95%;
				margin-left: 5%;
				margin-top: 5%;
				font-size: 16px;
			}
			
			.box img,.jigou_img,.zizhi_img{
				width: 24px;
				margin-right: 10px;
			}
			.photo {
				position: relative;
				margin-top: 60px;
			}
			.photo2{
				position: relative;
				margin-top: 160px;
			}
			.submit {
				width: 90%;
				height: 50px;
				margin-left: 5%;
				margin-top: 250px;
				margin-bottom: 100px;
				background-image: url(__PUBLIC__static/images/queding.png);
				background-size: 100%;
			}
		</style>
	</head>

	<body ontouchstart style="background-color: white">
		<header class="wy-header">
			<div class="wy-header-icon-back"><span></span></div>
			<div class="wy-header-title">
				<img class="backw" src="__PUBLIC__static/images/backwhite.png" alt="" />
				<span>修改信息</span>
			</div>
		</header>
		<!--//主体-->
		<div id="body">
			<form action="doupdate1" enctype="multipart/form-data" method="post" >
			<div class="inputbox">
				<img src="__PUBLIC__static/images/qianbi.png" />
				<label>机构名称</label>
				<input name="name" id="jigouname" type="text" value="{$result['name']}"/>
			</div>
			<div class="inputbox">
				<img src="__PUBLIC__static/images/qianbi.png" />
				<label>联系电话</label>
				<input name="tel" id="tel" type="text" value="{$result['tel']}"/>
			</div>
			<div class="inputbox">
				<img src="__PUBLIC__static/images/qianbi.png" />
				<label>机构地址</label>
				<input name="address" id="address" type="text" value="{$result['address']}"/>
			</div>
			<div class="photo">
				<div class="jigou">
					<img class="jigou_img" src="__PUBLIC__static/images/qianbi.png" />
					<label style="color: #898989;font-size: 20px;">机构照片</label>
					<i style="color: #898989;font-size: 12px;">(可选填,最多六张)</i>
					<!--file包裹-->
					<div class="addbtn_wrap one">
						<input type="button" class="btn btn-primary addbtn" value="点击添加图片">
						<input type="file" name="image[]" id="file" style="z-index: 1" onchange="getPhoto(this)">
					</div>


					<!--第一个图片包裹-->
					<div class="img_wrap">

					</div>

				</div>
			</div>
			<div class="photo2">
				<div class="zizhi">
					<img class="zizhi_img" src="__PUBLIC__static/images/qianbi.png" />
					<label style="color: #898989;font-size: 18px;">资质认证</label>
					<i style="color: #898989;font-size: 12px;">(可选填,默认营业执照,最多三张)</i>
					<div class="addbtn_wrap two">
						<input type="button" class="btn btn-primary addbtn" value="点击添加图片">
						<input type="file" name="image1[]" id="file1" style="z-index: 1" onchange="getPhoto1(this)">
					</div>

					<!--第二个图片包裹-->
					<div class="img_wrap1 second" style="margin-top: 40px" >

					</div>
				</div>
			</div>
			<input type="submit" class="submit" value="" />
			<!--<img class="submit" src="__PUBLIC__static/images/queding.png" />-->

				<form/>
		</div>
		<script src="__PUBLIC__static/lib/jquery-2.1.4.js"></script>
		<script src="__PUBLIC__static/lib/fastclick.js"></script>
		<script type="text/javascript" src="__PUBLIC__static/js/jquery.Spinner.js"></script>
		<script src="__PUBLIC__static/js/jquery-weui.js"></script>
		<script type="text/javascript">

			var res='{$res}';
			console.log(res);
			if(res!=='0'){
				alert(res);
			}
			/*预览*/
			var count=1;
			//这是第一个图片上传的功能方法
			function getPhoto(node) {
				//图片大于500k的不允上传
				if(node.files[0].size>512000){
					alert("图片大小不得超过500K");
					return false;
				}

				var imgURL = "";
				try{
					var file = null;
					if(node.files && node.files[0] ){
						file = node.files[0];
					}else if(node.files && node.files.item(0)) {
						file = node.files.item(0);
					}

					try{
						imgURL =  file.getAsDataURL();
					}catch(e){
						imgRUL = window.URL.createObjectURL(file);
					}
				}catch(e){
					if (node.files && node.files[0]) {
						var reader = new FileReader();
						reader.onload = function (e) {
							imgURL = e.target.result;
						};
						reader.readAsDataURL(node.files[0]);
					}
				}

				/*动态添加file和对应的图片预览*/
				createPic();
				createFile();

				count++;
				return imgURL;
			}
			//这是第二个图片上传的方法
			function getPhoto1(node) {
				if(node.files[0].size>512000){
					alert("图片大小不得超过500K");
					return false;
				}
				var imgURL1 = "";
				try{
					var file = null;
					if(node.files && node.files[0] ){
						file = node.files[0];
					}else if(node.files && node.files.item(0)) {
						file = node.files.item(0);
					}

					try{
						imgURL1 =  file.getAsDataURL();
					}catch(e){
						imgRUL1 = window.URL.createObjectURL(file);
					}
				}catch(e){
					if (node.files && node.files[0]) {
						var reader = new FileReader();
						reader.onload = function (e) {
							imgURL1 = e.target.result;
						};
						reader.readAsDataURL(node.files[0]);
					}
				}

				/*动态添加file和对应的图片预览*/
				createPic1();
				createFile1();

				count++;
				return imgURL1;
			}



			/*创建第一个图片上传的预览元素*/
			function createPic() {
				var picText='<div class="pic_wrap" id=" showPic'+count+'" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">'+
						'<img  src="'+imgRUL+'"" class="img img-rounded">'+
						'<div class="delete"><img src="/public/html/images/x_alt.png" onclick="deletePic(this)"></div>'+
						'</div>';

				/*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/

				for(var i=0;i< $("#file").length-1;i++){
					var val= $("#file").eq(i).val();


					if($("#file").last().val()==val){

						/*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/
						count=count-1;
						return;
					}
				}

				$('.img_wrap').append(picText);

			}


			/*创建第二个图片上传的预览元素*/
			function createPic1() {
				var picText1='<div class="pic_wrap1" id=" showPic1'+count+'" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">'+
						'<img  src="'+imgRUL1+'"" class="img img-rounded">'+
						'<div class="delete"><img src="/public/html/images/x_alt.png" onclick="deletePic(this)"></div>'+
						'</div>';

				/*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/



				for(var i=0;i< $("#file1").length-1;i++){
					var val= $("#file1").eq(i).val();


					if($("#file1").last().val()==val){

						/*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/
						count=count-1;
						return;
					}
				}

				$('.second').append(picText1);

			}




			/*创建第一个图片上传新的file元素*/
			function createFile() {

				var flieText='<input type="file" name="image[]" id="file'+(count+1)+'" style="z-index: '+(count+1)+'" onchange="getPhoto(this)">';

				/*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/

				for(var i=0;i< $("#file").length-1;i++){
					var val= $("#file").eq(i).val();

					if($("#file").last().val()==val){
						var file = $("#file").last();
						file.after(file.clone().val(""));
						file.remove();
						alert("图片已存在！");
						return ;
					}
				}


				$('.one').append(flieText);



			}
			/*创建第二个图片上传新的file元素*/
			function createFile1() {

				var flieText='<input type="file" name="image1[]" id="file'+(count+1)+'" style="z-index: '+(count+1)+'" onchange="getPhoto1(this)">';

				/*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/

				for(var i=0;i< $("#file1").length-1;i++){
					var val= $("#file1").eq(i).val();

					if($("#file1").last().val()==val){
						var file = $("#file1").last();
						file.after(file.clone().val(""));
						file.remove();
						alert("图片已存在！");
						return;
					}
				}


				$('.two').append(flieText);



			}



			/*移入移出，删除遮罩层显示隐藏*/
			function overDelete(obj) {
				$(obj).children('div').show();
			}

			function leaveDelete(obj) {
				$(obj).children('div').hide();
			}



			/*删除图片和对应的file*/
			function deletePic(obj) {

				/*提取图片的id的数字部分*/
				var picId=$(obj).parent().parent().attr('id');

				var picVal= picId.replace(/[^0-9]/ig,"");

				var fileArr=$('input[type=file]');

				/*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/

				fileArr.each(function () {

					/*提取file的id的数字部分*/
					var fileId=$(this).attr('id');
					var fileVal = fileId.replace(/[^0-9]/ig,"");
					if(fileVal==picVal){
						$(this).remove();
						$(obj).parent().parent().remove();
					}
				});

				/*图片数量大于1，显示提交按钮,删除一次判断一次*/


			}



			$(".backw").on("click", function() {
				window.history.back(-1);
			});
		</script>
	</body>

</html>